<template>
  <el-dialog title="添加子部门" :visible="showDialog" width="50%" @close="onClose" @closed="resetForm">
    <!-- 添加的表单 -->
    <el-form ref="formRef" label-width="85px" :model="form" :rules="formRules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" placeholder="请填写部门名称"></el-input>
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" placeholder="请填写部门编码"></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" style="width: 100%" placeholder="请选择部门负责人">
          <!-- 循环创建可选项 -->
          <el-option v-for="item in empList" :key="item.id" :label="item.username" :value="item.username"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" type="textarea" :rows="3" placeholder="请填写部门介绍"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="onCancel">取 消</el-button>
      <el-button size="mini" type="primary" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getEmpSimpleListAPI } from '@/api/emp.js'
import { getDepartListAPI, addDepartAPI } from '@/api/depart.js'

export default {
  name: 'AddDepart',
  // 父组件传递过来的数据
  props: {
    // 是否展示添加的对话框
    showDialog: {
      type: Boolean,
      default: false
    },
    pid: {
      type: String,
      default: ''
    }
  },
  data() {
    // 验证当前的部门名称，是否被占用
    const checkDepartName = (rule, value, cb) => {
      // 形参中的 value 是用户填写的部门名称
      const boo = this.departList.some(item => item.name.toUpperCase() === value.toUpperCase())
      boo ? cb(new Error(`"${value}"部门名称已存在！`)) : cb()
    }

    // 验证兄弟部门是否有存在相同的编码
    const checkCode = (rule, value, cb) => {
      // 形参中的 value 就是当前填写的部门编码
      const boo = this.departList
        .filter(item => item.pid === this.pid)
        .some(item => item.code.toUpperCase() === value.toUpperCase())
      boo ? cb(new Error(`部门编码"${value}"已被使用，请更换其它编码！`)) : cb()
    }

    return {
      form: {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      },
      formRules: {
        code: [
          // 必填项
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          // 自定义的校验规则
          { validator: checkCode, trigger: 'blur' }
        ],
        // 介绍
        introduce: [
          // 必填项
          { required: true, message: '部门介绍不能为空', trigger: 'blur' }
        ],
        // 负责人
        manager: [
          // 必填项
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        // 部门名称
        name: [
          // 必填项
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          // 自定义校验规则
          { validator: checkDepartName, trigger: 'blur' }
        ]
      },
      empList: [],
      departList: []
    }
  },
  created() {
    this.initEmpList()
    this.initDepartList()
  },
  methods: {
    onClose() {
      this.$emit('update:showDialog', false)
      // this.$emit('update:pid', '')
    },
    onCancel() {
      this.$emit('update:showDialog', false)
      // this.$emit('update:pid', '')
    },
    onConfirm() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        await addDepartAPI({ ...this.form, pid: this.pid })
        this.$message.success('添加子部门成功')
        this.$emit('reload')
        this.$emit('update:showDialog', false)
        // this.$emit('update:pid', '')
      })
    },
    // 获取员工列表数据
    async initEmpList() {
      const result = await getEmpSimpleListAPI()
      console.log(result)
      this.empList = result.data
    },
    resetForm() {
      this.$refs.formRef.resetFields()
      this.$emit('update:pid', '')
    },
    // 初始化部门的列表数据
    async initDepartList() {
      const result = await getDepartListAPI()
      this.departList = result.data.depts
    }
  }
}
</script>

<style lang="scss" scoped></style>
